$purple: rgb(172, 28, 177);
$size: 40px;

.circle-loading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid rgb(184, 187, 191);
  border-radius: 100%;
  width: $size;
  height: $size;
  font-size: 12px;
  font-weight: bold;
  color: $purple;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 2px 1px rgba(0, 0, 0, 0.2);
  &::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -24px;
    margin-left: -24px;
    display: block;
    border: 4px solid transparent;
    border-top-color: $purple;
    border-radius: 100%;
    width: $size;
    height: $size;
    animation: rotate1 infinite 2s ease;
  }

  @keyframes rotate1 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
